<template>
	<view class="content">
		<view class="tag">
			<text class="title">标题</text>
			<u--textarea v-model="req.title" placeholder="请输入标题" autoHeight :height="120" count
			:maxlength="30"></u--textarea>
		</view>
		<view class="tag">
			<text class="title">正文</text>
			<u--textarea v-model="req.describe" placeholder="严禁输入涉黄,政治,暴力,广告等违规内容,违反者封禁处理!" count
				:height="120" :maxlength="200"></u--textarea>
		</view>
		<view class="tag">
			<text class="title">封面图(只能选择1张图片)</text>
			<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="1"
				uploadIcon="plus"></u-upload>
		</view>
		<view class="tag">
			<text class="title">选择文件(只能选择视频或者图片上传限制为5张)</text>
			<u-upload :fileList="fileList2" @afterRead="afterRead" @delete="deletePic" name="2" multiple :maxCount="5"
				uploadIcon="plus"></u-upload>
		</view>
		<view class="tag">
			<text class="title">选择话题</text>
			<view class="tags_flex">
				<block v-for="(item,index) in tags" :key="index">
					<u-tag :text="`#${item.tag}`" type="warning" shape="circle" v-if="item.isShow === true"
						@click="ItemTag(item,index)"></u-tag>
					<u-tag :text="`#${item.tag}`" type="warning" shape="circle" plain v-if="item.isShow === false"
						@click="ItemTag(item,index)"></u-tag>
				</block>
			</view>
		</view>
		<view style="width: 100%;height:150rpx">
			<button class="add" @click="Newdynamics">发布动态</button>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		getdynamicsTags,
		Newdynamics
	} from '../../api/user.js';
	export default {
		data() {
			return {
				fileList1: [],
				fileList2: [],
				tags: [],
				req: {
					title: '', //标题
					describe: '', //描述
					coverImage: '', //封面图
					links: [], //图片或者视频
					tags: [], //话题标签
				}
			}
		},
		onLoad() {

		},
		onShow() {
			this.getdynamicsTags();
		},
		methods: {
			/** 
			@method 获取动态话题标签
			**/
			async getdynamicsTags() {
				try {
					this.tags = [];
					
					const res = await getdynamicsTags({
						page: 1,
						pageSize: 20,
					});

					if (res.code == 200) {
						for (var i = 0, len = res.data.data.length; i < len; i++) {
							this.tags.push({
								tag: res.data.data[i].tag,
								url: res.data.data[i].url,
								isShow: false,
							});
						}
					}
				} catch (e) {
					//TODO handle the exception
					console.log(e);
				}
			},
			//图片解析
			getImageUrl(imgs) {
				var urls = new Array();
				for (var i = 0, len = imgs.length; i < len; i++) {
					urls.push(imgs[i].url);
				}
				return urls || [];
			},
			/** 
			@method 发布动态
			 **/
			async Newdynamics() {
				try {
					this.req = {
						...this.req,
						...{
							tags: this.tags.filter((v) => v.isShow === true),
							coverImage: this.fileList1.length > 0 ? this.getImageUrl(this.fileList1)[0] : '',
							links: this.fileList2.length > 0 ? this.getImageUrl(this.fileList2) : [],
						}
					};

					const res = await Newdynamics(this.req);

					if (res.code === 200) {
						this.$refs.uToast.show({
							type: "default",
							title: "默认主题",
							message: "动态信息提交成功，审核后展示！",
							iconUrl: "https://uviewui.com/demo/toast/default.png",
							complete() {
								uni.reLaunch({
									url: '/pages/tabBar/Video/index'
								});
							},
						});
					}
				} catch (e) {
					//TODO handle the exception
					console.log(e);
				}
			},
			ItemTag(item, index) {
				this.$set(this.tags[index], 'isShow', this.tags[index].isShow = !this.tags[index].isShow);
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1);
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);
				let fileListLen = this[`fileList${event.name}`].length;
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: "uploading",
						message: "上传中",
					});
				});
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url);
					let item = this[`fileList${event.name}`][fileListLen];
					this[`fileList${event.name}`].splice(
						fileListLen,
						1,
						Object.assign(item, {
							status: "success",
							message: "",
							url: result,
						})
					);
					fileListLen++;
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: "http://120.79.170.227:5000/api/public/upload", //七牛云上传接口
						filePath: url,
						name: "file",
						success: (res) => {
							setTimeout(() => {
								resolve(JSON.parse(res.data).data.url);
							}, 1000);
						},
					});
				});
			},
		}
	}
</script>

<style>
	page {
		background: #fff;
	}
</style>
<style scoped lang="scss">
	.content {
		width: auto;
		padding: 0rpx 20rpx 20rpx 20rpx;

		/deep/ .u-textarea {
			background-color: #fbfdff;
			border: none;
			letter-spacing: 2rpx;
		}

		/deep/ .u-textarea__count {
			background-color: #fbfdff !important;
		}

		/deep/ .u-upload__button {
			background-color: #fbfdff !important;
		}

		.tag {
			
			/deep/ .uni-textarea-wrapper{
				min-height:50rpx !important;
			}
			
			.title {
				display: block;
				font-size: 30rpx;
				font-weight: 500;
				color: #333;
				letter-spacing: 2rpx;
				margin-top: 20rpx;
				margin-bottom: 20rpx;
			}

			.tags_flex {
				width: auto;
				display: flex;
				align-items: center;
				flex-wrap: wrap;

				/deep/ .u-tag-wrapper {
					margin-right: 15rpx;
					margin-bottom: 15rpx;
				}
			}
		}

		.add {
			width: 95%;
			position: fixed;
			left: 2.5%;
			bottom: 1.5%;
			height: 84rpx;
			background: #ffaf32;
			border: none;
			box-shadow: 0rpx 6rpx 30rpx 0rpx rgba(83, 60, 215, 0.4600);
			border-radius: 43rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 84rpx;
			text-align: center;
			letter-spacing: 2rpx;
		}
	}
</style>